<template>
  <el-card>
    <div class="sales-header">
      <el-tabs v-model="tab">
        <el-tab-pane label="销售额" name="first"></el-tab-pane>
        <el-tab-pane label="访问量" name="second"></el-tab-pane>
      </el-tabs>
      <div class="sales-date">
        <el-radio-group
          class="sales-radio"
          v-model="radioValue"
          @change="radioChange"
        >
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="今年" />
        </el-radio-group>

        <el-date-picker
          v-model="date"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
        />
      </div>
    </div>

    <!-- 柱形图 -->
    <div class="chart-body" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XSales",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import dayjs from "dayjs";
import * as echarts from "echarts";
import type { ECharts } from "echarts";
import type { SingleOrRange, DateModelType } from "element-plus";

const chartRef = ref();

//单选按钮
const radioValue = ref("今日");
const radioChange = (val: string | number | boolean) => {
  if (val == "今日") {
    const start = dayjs().format("YYYY-MM-DD");
    date.value = [start, start];
  } else if (val == "本周") {
    const start = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD");
    const end = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD");
    date.value = [start, end];
  } else if (val == "本月") {
    const start = dayjs().startOf("month").format("YYYY-MM-DD");
    const end = dayjs().endOf("month").format("YYYY-MM-DD");
    date.value = [start, end];
  } else {
    const start = dayjs().startOf("year").format("YYYY-MM-DD");
    const end = dayjs().endOf("year").format("YYYY-MM-DD");
    date.value = [start, end];
  }
};

//时间日期选择器
const start = dayjs().format("YYYY-MM-DD");
const date = ref<SingleOrRange<DateModelType>>([start, start]); //第一个是开始日期，第二个是结束日期
const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const start = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD");
      const end = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD");
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const start = dayjs()
        .subtract(2, "month")
        .startOf("month")
        .format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      return [start, end];
    },
  },
];

function getData() {
  const data = [];
  for (let i = 0; i < 12; i++) {
    data.push(Math.random() * 70 + 30);
  }
  return data;
}
const tab = ref("first");

let myEcharts: ECharts;

watch(tab, (tab) => {
  //想要图表数据更新，在调用一次setOption方法，数据会进行比对，不同的地方就会覆盖
  myEcharts.setOption({
    title: {
      text: tab == "first" ? "销售趋势" : "访问量趋势",
    },
    series: {
      data: getData(),
    },
  });
});
//柱形图
onMounted(() => {
  myEcharts = echarts.init(chartRef.value);
  const option = {
    title: {
      text: "销售趋势",
    },
    xAxis: {
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    yAxis: {},
    series: {
      type: "bar",
      data: getData(),
      barWidth: 25,
      itemStyle: {
        color: "#3398db",
      },
    },
    tooltip: {},
    grid: {
      left: 40,
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.sales-header {
  position: relative;
}

.sales-date {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
}
.sales-radio {
  margin-right: 15px;
}
.chart-body {
  width: 1000px;
  height: 300px;
}
</style>
